<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card style="width: 100%; margin-bottom: 10px" shadow="never">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="ordDto.orderNumber"
            clearable
            style="width: 120px"
            placeholder="车牌号"
            size="small"
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="ordDto.number"
            clearable
            style="width: 120px"
            placeholder="自编号"
            size="small"
          >
          </el-input>
        </el-col>

        <el-col
          style="display: flex; justify-content: flex-end; align-items: center"
          :span="2"
        >
          <el-space :size="4">
            <el-button type="primary" plain size="small" @click="handleSearch"
              >搜索</el-button
            >
            <!-- <el-button type="danger" plain size="small" @click="drawer = true"
                >添加</el-button
              > -->
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格数据展示 EEF7FD -->
    <el-card
      style="width: 100%; background: #eef7fd; float: left"
      shadow="never"
    >
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="序号" width="70" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单号"
          align="center"
          width="200"
        />
        <el-table-column
          prop="number"
          label="销售订单"
          align="center"
          width="200"
        />

        <el-table-column
          prop="cancellationType"
          label="类型"
          align="center"
          width="200"
        />
        <el-table-column
          prop="cancellationTime"
          label="消单时间"
          align="center"
          width="200"
        />

        <el-table-column prop="isPush" label="推送结果" align="center">
          <template #default="scope">
            {{ scope.row.isPush == 1 ? "未推送" : "失败" }}
          </template>
        </el-table-column>

        <el-table-column prop="pushStatus" label="推送订单状态" align="center">
          <template #default="scope">
            {{ scope.row.pushStatus == 4 ? "成功" : "失败" }}
          </template>
        </el-table-column>

        <el-table-column prop="types" label="是否推送" align="center">
          <template #default="scope">
            {{ scope.row.types == 2 ? "已推送" : "推送失败" }}
          </template>
        </el-table-column>
        <el-table-column prop="msg" label="推送结果" align="center" />
        <el-table-column prop="creationTime" label="创建时间" align="center" />
      </el-table>
    </el-card>
  </div>
</template>
        
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElLoading } from "element-plus";
import { getOrderPush } from "@/api/order/mov.js";

const loading = ref(true);
const tableData = ref([]);
const CarPerList = ref([]);

const ordDto = ref({
  orderNumber: "",
  number: "",
});

onMounted(() => {
  getList();
});

const getList = () => {
  getOrderPush(ordDto.value).then((res) => {
    loading.value = false;
    console.log(res);
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data;
    }
  });
};

const handleSearch = () => {
  getList(ordDto.value);
};

const handleEdit = () => {};
</script>
      <style scoped>
/*最外层透明*/
:deep(.el-table, .el-table__expanded-cell) {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
:deep(.el-table th, .el-table tr, .el-table td) {
  background-color: transparent !important;
  border: 0;
  color: #135294;
}
/*去除底边框*/
:deep.el-table td.el-table__cell {
  border: 0;
}
:deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
/*去除底部灰条.el-table::before*/
:deep .el-table::before {
  display: none;
}
.el-pagination {
  text-align: center;
  justify-content: center;
  color: #135294;
}
:deep .el-pagination__sizes,
.el-pagination__total {
  color: #135294 !important;
}
:deep .el-pagination button {
  background-color: transparent !important;
}
:deep .el-pager li {
  background-color: transparent !important;
}
:deep(.el-pagination button.is-disabled, .el-pagination button.is-disabled) {
  background-color: transparent !important;
}
:deep .el-pagination .el-select {
  width: 100px !important;
}
</style>